<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@include file="/include/public.jspf"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="${path }/css/default/m-base.css" />
<link rel="stylesheet" type="text/css" href="${path }/css/default/m-common.css" />
<link rel="stylesheet" type="text/css" href="${path }/css/default/p-all.css" />
<link href="${path }/css/default/p-addbank-new.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="${path }/js/jquery1.10.2.min.js"></script>
<script type="text/javascript" src="${path }/js/zepto.min.js"></script>
<script type="text/javascript" src="${path }/js/iscroll.js"></script>
<script type="text/javascript" src="${path }/js/common.js"></script>


<title>魔环金融</title>
</head>
<body>
 <div class="p_addbank_new">
                <div class="ui_title"><a class="ui_back" href="${path }/"><i class="ui_icon_back"></i>返回</a>验证开户</div>
                <div class="login_banner">
            <img src="${path }/images/bank_banner.png" width="100%">
        </div>
        <div class="ui_register">
            <div class="tc pt10 f14 gray">请填写真实姓名和身份证号</div>
            <form id="bind_card_form" name="bind_card_form" method="POST" onsubmit="return false;">
                <div class="form_box clearfix">
                                        <div class="border_b" id="list_chinese_name">
                        <input id="JS-username" class="ui_reg_input" type="text" name="username" placeholder="姓名" value="" />
                    </div>
                    <div class="border_b" id="list_user_id">
                        <input id="JS-userid" class="ui_reg_input" type="text" name="userid" placeholder="身份证号码" value="" />
                    </div>
                    
<!--                     <div class="border_b list_bank_id" id="list_bank_id">
                        <input id="JS-bankid" class="ui_reg_input" type="hidden" name="bankid" value=""/>
                        <div class="list_text holder">借记卡所属银行</div>
                    </div>
                    
                    <div class="border_b" id="list_bank_code">
                        <input id="JS-bankcode" class="ui_reg_input" type="text" name="bankcode" placeholder="借记卡卡号" />
                    </div> -->
                    
                </div>
                <div>
                    <input id="bind_car_btn" type="submit" class="reg_finish_btn" value="完成"> 
                    <p class="tc pt10 f14">同意<a href="${path }/html/zjtgProtocol.html">《支付托管账户服务协议》</a></p>
                </div>
                
            </form>
        </div>
    </div>
    <section class="p_account_addbank_panel" id="p_bank_id">
        <div class="ui_title"><a id="bank_id_back" class="ui_back" href="javascript:void(0);"><i class="ui_icon_back"></i>返回</a>选择开户行</div>
        <div class="bank_tip">您可以通过<a href="http://www.mhp2p.com/front/homeAction/mobileAPP">下载魔环金融客户端</a>或登录电脑选择其他银行。</div>
        <!-- 循环 -->
        <div class="panel_bd">
            <div class="choice-con"></div>
        </div>
    </section>
<script>
$(function(){
var bankListHash = [{"bankCode":"CNCB","bankName":"\u4e2d\u4fe1\u94f6\u884c","perDayLimit":5000000,"perLimit":500000,"bank_id":"10"},{"bankCode":"BOC","bankName":"\u4e2d\u56fd\u94f6\u884c","perDayLimit":100000000,"perLimit":100000000,"bank_id":"8"},{"bankCode":"CCB","bankName":"\u5efa\u8bbe\u94f6\u884c","perDayLimit":100000000,"perLimit":100000000,"bank_id":"3"},{"bankCode":"PSBC","bankName":"\u90ae\u653f\u50a8\u84c4\u94f6\u884c","perDayLimit":100000000,"perLimit":1000000,"bank_id":"6"},{"bankCode":"BOCOM","bankName":"\u4ea4\u901a\u94f6\u884c","perDayLimit":2000000,"perLimit":2000000,"bank_id":"9"},{"bankCode":"CEB","bankName":"\u5149\u5927\u94f6\u884c","perDayLimit":100000000,"perLimit":100000000,"bank_id":"5"},{"bankCode":"CMBC","bankName":"\u6c11\u751f\u94f6\u884c","perDayLimit":100000000,"perLimit":100000000,"bank_id":"17"},{"bankCode":"PAB","bankName":"\u5e73\u5b89\u94f6\u884c","perDayLimit":100000000,"perLimit":100000000,"bank_id":"41"},{"bankCode":"ICBC","bankName":"\u5de5\u5546\u94f6\u884c","perDayLimit":5000000,"perLimit":5000000,"bank_id":"1"},{"bankCode":"ABC","bankName":"\u519c\u4e1a\u94f6\u884c","perDayLimit":10000000,"perLimit":5000000,"bank_id":"2"},{"bankCode":"CIB","bankName":"\u5174\u4e1a\u94f6\u884c","perDayLimit":5000000,"perLimit":5000000,"bank_id":"7"},{"bankCode":"CMB","bankName":"\u62db\u5546\u94f6\u884c","perDayLimit":100000000,"perLimit":100000000,"bank_id":"4"}];
var _inSubmitRequest = false;
var _bankListClickFlag = true;
function upateSubmitButton() {
    var disabled = _inSubmitRequest || $('#JS-username').val() == '' || $('#JS-userid').val() == '' || $('#JS-bankid').val() == '' || $('#JS-bankcode').val() == '';
    if (disabled) {
        $('#bind_car_btn').attr('disabled', 'disabled');
        } else {
        $('#bind_car_btn').removeAttr('disabled');
    }
}
$('#JS-username,#JS-userid,#JS-bankcode').bind("input", upateSubmitButton);

var _upateSubmitButtonCount = 10;
var _upateSubmitButtonTimer = setInterval(function(){
    upateSubmitButton();
    _upateSubmitButtonCount--;
    if (_upateSubmitButtonCount < 0) {
        clearInterval(_upateSubmitButtonTimer);
    }
}, 300);

//银行填充
$('#p_bank_id .choice-con').html(function() {
    var html = '';
    for (var i = 0; i < bankListHash.length; i++) {
        html += '<div class="ui_bank_list" data-id="'+ bankListHash[i].bank_id +'" data-name="'+ bankListHash[i].bankName +'">';
        html += '    <div class="ui_bank_img ' + bankListHash[i].bankCode + '"></div>';
        html += '    <div class="ui_bank_text">';
        html += '        <h2>'+ bankListHash[i].bankName +'</h2>';
        if(bankListHash[i].perDayLimit && bankListHash[i].perLimit){
            html += '    <p class="gray_v1">限额'+ wanFormat(bankListHash[i].perLimit / 100) +'元/笔 '+ wanFormat(bankListHash[i].perDayLimit / 100) +'元/天</p>';    
        }
        html += '    </div>';
        html += '    <div class="ui_bank_icon"></div>';
        html += '</div>';
    }
    return html;
});

function wanFormat(num) {
    if (num >= 10000) {
        return num / 10000 + '万';
    }
    return num;
}
//iscroll实例化
var scroll_bankid = new IScroll('#p_bank_id .panel_bd', {
     click: true
});
//面板事件绑定
$('#list_bank_id').click(function(){
    if ( !_bankListClickFlag )  return;
    _bankListClickFlag = false;
    document.body.scrollTop = 0;
    $('#p_bank_id').addClass('p_show');
});
$('#bank_id_back').click(function(){
    $('#p_bank_id').removeClass('p_show');
    setTimeout(function(){
        _bankListClickFlag = true;
    },600);
});
$('#p_bank_id .choice-con .ui_bank_list').click(function(){
    var $this = $(this);
    $this.addClass('active').siblings().removeClass('active');
    $('#JS-bankid').val($this.attr('data-id'));
    $('#list_bank_id .list_text').removeClass('holder').html($this.attr('data-name'));
    $('#p_bank_id').removeClass('p_show');
    upateSubmitButton();
    setTimeout(function(){
        _bankListClickFlag = true;
    },600);
});

$('#bind_card_form').submit(function(){
    if (_inSubmitRequest) return;
    if(!/^[\u0391-\uFFE5]{2,10}$/.test($('#JS-username').val())){
       P2PWAP.ui.showErrorTip('姓名输入不正确');
       return;
    }
    if(!/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[A-Z])$/.test($('#JS-userid').val())){
        P2PWAP.ui.showErrorTip('身份证号码输入不正确');
        return;
    }
/*     if(!/\d+/.test($('#JS-bankid').val())){
        P2PWAP.ui.showErrorTip('银行不能为空');
        return;
    } ;
    if(!/^\d{10,20}$/.test($('#JS-bankcode').val())){
        P2PWAP.ui.showErrorTip('银行卡号输入不正确');
        return;
    } ; */

    _inSubmitRequest = true;
    upateSubmitButton();
    P2PWAP.util.request('/user/doCombineRegist', function(data){
        _inSubmitRequest = false;
        upateSubmitButton();
        window.location.href = '${path}/account/charge';
    },function(msg){
        _inSubmitRequest = false;
        upateSubmitButton();
        P2PWAP.ui.showErrorTip(msg);
    },'get',{
        'name': $('#JS-username').val(),
        'idno': $('#JS-userid').val(),
        'bankName': $('#JS-bankid').val(),
        'bankCardNo': $('#JS-bankcode').val()
    });
});
});
</script>
</body>
</html>